The poor man's guide to HTML

 Back To Main Page

Building documents dynamically in HTML is what Wapapi is all about.

This is a quick reference guide to HTML; I call it the poor man's guide because most of as are not 'rich' on spare time, and who can afford bunch of those $50 computer books now-a-days anyway? This guide will give you enough info to start creating pretty complex pages in a couple of minutes.

Its broken down into 10 very short lessons.

Introduction:
HTML is an acronym for: Hyper Text Markup Language

In a nutshell, HTML is plain ASCII text with a lot of embedded 'tags' that tell a web browser such as Navigator or Internet Explorer how to display it.

You can get a lot of mileage out of knowing a handful of tags.

To make an HTML file, just run Notepad, Wordpad, or any editor, and then just start typing. When you have finished, save the file with a .HTM extention. When you are browsing web pages, each web page is actually just a file made in exactly this manner.

The easiest way to make an HTML file is to type in all the text that you want in your page, and then add in a bunch of tags so that your page will have nicer formatting.

Lesson 1: What are tags?
A tag is inserting into your document by putting it between the greater than and less than signs.
Examples:
< tag> < b> < i>
Note:
Tags are not case sensitive, I use lowercase in my examples for ease of reading. Example tags also have spaces in them right after the less than sign: < . This is only used so that the examples will not be used by your browser as tags. Do not add spaces after the less than sign when you are building your documents.

Lesson 2: How to use tags
Tags come in pairs. The second tag in a pair is the closing tag. The closing tag is the same as the first tag, with an aditional slash.
Examples:
< html> < /html> < b> < /b> < i> < /i>
Note:
You can put any text you want to between tags
Note:
tabs, multiple spaces, and carriage-returns are all considered as a single space for most browsers, so putting tags on different lines makes no difference to a browser, but makes your document more readable when you create it.

Lesson 3: The mimimum tags for a document
Embed all of your text document for a web page in these tags:
< html> < body> {your document goes here} < /body> < /html>
 These two tags should always be the first and last lines in your document.
Example:
This following line is a complete HTML document:
< html> < body> Hello World < /body> < /html>

Lesson 4: Setting off text
Learn to love these tags:
the bold tag:< b> < /b>
the italic tag:< i > < /i>
the underline tag:< u> < /u>
You can put these tags around text that you want set-off from the rest of your document.
Example:
Hello < b> there < /b> world shows up in a browser as: Hello there world

Lesson 5: Dividing your document
You can divide your document into sections using the < hr> tag.
This tag is an anomoly: There is no < /hr>.
Use the < hr> tag by itself. It will create a horizontal line across your document. you can vary the width of the line by using a variation on the tag: < hr size=4>. Change the size=xx portion until your line is the correct size.

Lesson 6: Links to other web pages
You can create a link on your page to another HTML web page by using the < a> < /a> tag. This tag has the following usage: < a href="address"> Text < /a> Replace the address portion with the address of the web page you want to make a link to (double quotes around it are required). Replace: Text with a description of the link. This description is what the browser will show on the screen.
Example:
< a href="http://www.widgets.com/index"> Widgets < /a>
will show up in the browser as: Widgets
When the user clicks on Widgets, they will jump to the web page that you typed in as an href.

Lesson 7: Tables
Tables can nicely organize a section of your page. They can also be a bit complex to use, so make sure you have these tags in the correct order, and that you use the closing tag in the correct place.
You can create a table with these three tags:
the table tag < table> < /table>
the table row tag < tr> < /tr>
the table data tag < td> < /td>
An example best shows how to make a table.
This HTML:
< table border=1>
< tr>
< td> Street < /td>
< td> City < /td>
< td> State < /td>
< /tr>
< tr>
< td> Willow < /td>
< td> Anchorage < /td>
< td> AK < /td>
< /tr>
< tr>
< td> Main< /td>
< td> Nome< /td>
< td> AK< /td>
< /tr>
< /table>
Will produce this table:
Street City State
Willow Anchorage AK
Main Nome AK

Important:
Text within the table must apear between the < td> and < /td> tags. Do not put any text between other tags in the table.

Lesson 8: Graphics
You can add a very nice effect to your page by adding in graphic images. You can only use GIF and JPG images in your page. If you have a bitmap (BMP) file, you need to convert it. Use the < img> tag to embed a graphic in your page. This is another tag that is used by itself, with no ending tag.
Example:
< img sre="theworld.gif ">
Note:
As well as adding this tag to your document, you will need to ensure that the graphic file itself is on your web server, or in the appropriate location for Wapapi to get it.

Lesson 9: Look at other pages
With a basic understanding of HTML tags, you can explore other people's web pages, and see exactly how they set stuff up to look good. Just go to their web page and use the 'View Source' option in your browser.

Lesson 10: Review
The following tags have been described:
the HTML document tag: < html> < /html>
the body of document tag: < body> < /body>
the bold tag: < b> < /b>
the italic tag: < i> < /i>
the underline tag: < u> < /u>
the horizontal rule tag: < hr size=##>
the hyperlink tag: < a href="$$$">
the table tag: < table border=1> < /table>
the table row tag: < tr> < /tr>
the table data(or cell) tag: < td> < /td>
the graphic image tag: < img src="">